<template>
    <!-- 标签组件 closable不带添加标签按钮的样式 -->
    <el-tabs v-model="editableTabsValue" type="card" closable class="demo-tabs" @tab-remove="removeTab"
        @tab-click="tabClick">
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
/**
 * 1 从store状态管理中获取标签页数据
 */
import { useStore } from 'vuex';
const store = useStore();

// 使用计算属性动态监控
const editableTabsValue = computed(() => store.state.menus.editableTabsValue); // 当前激活标签页
const editableTabs = computed(() => store.state.menus.editableTabs); // 标签数组

/**
 * 使用 computed 函数从 Vuex store 中获取状态时，
 * 你得到的是一个计算属性（computed property）而不是一个直接的值。
 * 这个计算属性是一个对象，它有一个 value 属性，这个 value 属性包含了计算属性的当前值。
 * computed 函数在 Vue 3 中返回的是一个响应式引用（reactive reference），
 * 这意味着它的值可能会随着依赖项的变化而变化。为了访问这个引用的当前值，
 * 你需要使用 .value 属性。
 */

// 标签页添加事件已经在SideMenus实现
// 实现删除标签页操作
function removeTab(targetName: string) {
    // 保证首页的标签不能被删除
    if (targetName !== 'Index') {
        store.commit("removeTab", targetName);
        // 同时跳转路由
        router.push({ name: editableTabsValue.value });
    }
}

// 点击标签页后跳转路由
function tabClick(tab: any) {
    store.commit("setActiveTab", tab.props.name)
    router.push({ name: tab.props.name });
}

/**
 * router.push 是一个用于导航到不同路由的方法。
 * router.push 接受一个路由对象作为参数，该对象描述了目标路由的信息。
 * 这个路由对象可以包含多种属性，如 name（路由名称）、path（路由路径）或 component（目标组件）等。
 */

</script>

<style>
.demo-tabs>.el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>